<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	
    <link rel="stylesheet" type="text/css" href="../css/jqDock.css">
	<script type="text/javascript">
	 jQuery(function($){
		$('div.demo').children().click(function(ev){
				var wrapper = $(this).parent().parent()
					, label = wrapper.find('.jqDockLabel').text() || ''
					, t = [
							'you clicked on'
						, '#' + wrapper.closest('.jqDocked').attr('id') + ', option ' + (wrapper.index()+1)
						];
				if(label){ t.push('"' + label + '"'); }
    		$('#showClicked').stop().hide().css({opacity:1}).html(t.join('<br />')).show().fadeOut(5000);
				this.blur();
				return false;
      });
		var changeSource = function(i){
				return (this.alt) ? false : this.src.replace(/(jpg|gif)$/,'png');
			}
			, demoOpts = [
		    {labels:true, source:changeSource}
		  , {align:'right', distance:60, labels:'mc', inactivity:4000}
		  , {align:'top', distance:60, labels:true}
		  , {align:'middle', coefficient:1, labels:'br'}
		  , {align:'left', labels:true}
		  , {align:'center', size:60, distance:80}
		  , {size:36, distance:54, fadeIn:1000, source:changeSource}
		  ];
    $('div.demo').each(function(i){
    		$(this).jqDock(demoOpts[i]);
      });
  });
	</script>
  </head>
  
  <body>
  
  <div id='menu' class='demo'> 
    <a href='#' title='Clock'> 
	    <img src='images/m1/Clock.jpg' alt='' /> 
    </a> 
    <img src='images/m1/Connect.jpg' alt='' title='Connect' /> 
    <a href='index.php?dt=1' title='Music'> 
      <img src='images/m1/Music.jpg' alt='' /> 
    </a> 
    <img src='images/m1/Pictures.jpg' alt='' title='Pictures' /> 
    <a href='#' title='Search'> 
      <img src='images/m1/Search.jpg' alt='' /> 
    </a> 
    <a href='#' title='System'> 
      <img src='images/m1/System.jpg' alt='' /> 
    </a> 
    <img src='images/m1/Trash.jpg' alt='' title='Trash' /> 
  </div> 
 
  </body>
</html>
